<template>
  <view class="report-container">
    <!-- 页面标题 -->
    <text class="page-title">天气预报整合功能</text>
    
    <!-- 三个核心功能按钮 -->
    <button @click="chooseImage" class="func-btn blue">选择图片预览</button>
    <button @click="viewWeather" class="func-btn orange">查看天气预报</button>
    <button @click="downloadImg" class="func-btn green">下载网络图片</button>
    
    <!-- 图片预览区域 -->
    <view class="img-preview" v-if="imagePath">
      <text>预览/下载结果：</text>
      <image :src="imagePath" mode="widthFix" class="preview-img"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: '', // 存储图片路径（预览/下载后显示）
      // 测试用网络图片地址（确保可访问）
      networkImgUrl: "https://cdn.pixabay.com/photo/2023/05/01/15/21/mountain-7966711_1280.jpg"
    };
  },
  methods: {
    // 1. 选择图片预览（调用系统相册）
    chooseImage() {
      uni.chooseImage({
        count: 1, // 仅选择1张图片
        sourceType: ['album', 'camera'], // 支持相册和相机
        success: (res) => {
          this.imagePath = res.tempFilePaths[0]; // 存储临时路径用于预览
          // 直接预览选中的图片
          uni.previewImage({
            urls: [this.imagePath],
            current: 0
          });
        },
        fail: (err) => {
          uni.showToast({ title: '选择图片失败', icon: 'none' });
          console.error('选择图片错误：', err);
        }
      });
    },

    // 2. 查看天气预报（跳转到原有天气预报页面）
    viewWeather() {
      uni.navigateTo({
        url: '/pages/weather/weather', // 对应原有weather页面路径
        fail: () => {
          uni.showToast({ title: '跳转失败，请检查页面路径', icon: 'none' });
        }
      });
    },

    // 3. 下载网络图片
    downloadImg() {
      uni.showLoading({ title: '下载中...' });
      uni.downloadFile({
        url: this.networkImgUrl, // 网络图片地址
        success: (res) => {
          // 下载成功（状态码200）
          if (res.statusCode === 200) {
            this.imagePath = res.tempFilePath; // 存储临时路径用于预览
            uni.hideLoading();
            uni.showToast({ title: '下载成功' });
          } else {
            uni.hideLoading();
            uni.showToast({ title: '下载失败', icon: 'none' });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showToast({ title: '下载失败，请重试', icon: 'none' });
          console.error('下载图片错误：', err);
        }
      });
    }
  }
};
</script>

<style scoped>
.report-container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.func-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  border: none;
  color: #fff;
}

/* 按钮颜色区分（与案例页风格统一） */
.blue {
  background-color: #1296db;
}

.orange {
  background-color: #ff9900;
}

.green {
  background-color: #07c160;
}

/* 图片预览样式 */
.img-preview {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.preview-img {
  width: 100%;
  height: auto;
  border-radius: 10rpx;
  border: 1px solid #eee;
}
</style>